<template>
  <div>
    <ScrollBoard
      v-if="config.data.length"
      :config="config"
      :style="{
        height: `${vh(320)} !important`,
      }"
    />
  </div>
</template>
<script lang="ts" setup>
import { ScrollBoard } from '@kjgl77/datav-vue3'
import { vh } from '@screen/utils/index'
import { watch, ref } from 'vue'

const props = withDefaults(
  defineProps<{
    list: (string | number[])[]
  }>(),
  {
    list: () => [],
  },
)
const config = ref({
  header: [
    '排名',
    '单位名称',
    '负责事项数量',
    '重点项目数量',
    '事项办理得分',
    '重点项目加分',
    '超时减分',
    '总分',
  ],
  data: [],
  rowNum: 7,
  // columnWidth: [50],
  align: [
    'center',
    'center',
    'center',
    'center',
    'center',
    'center',
    'center',
    'center',
  ],
  headerBGC: 'rgba(21, 154, 255, 0.2)',
  oddRowBGC: 'rgba(21,154,255,0.12)',
  evenRowBGC: 'transparent',
  headerHeight: vh(40),
})

watch(
  () => props.list,
  (newVal) => {
    config.value.data = newVal
  },
  {
    deep: true,
  },
)
</script>

<style lang="scss" scoped>
:deep(.header-item) {
  height: vh(40);
  font-size: vw(14) !important;
  font-weight: 400;
  line-height: vh(40);
  color: rgba(21, 154, 255, 1);
}

:deep(.row-item) {
  height: vh(40) !important;
  line-height: vh(40);
  font-size: vw(14) !important;
  background: rgba(21, 154, 255, 0.08);
  color: rgba(208, 222, 238, 1);
}

:deep(.tag) {
  width: vw(39);
  height: vh(26);
  opacity: 1;
  padding: vh(5) vw(5);
  border-radius: vw(4);
  background: rgba(21, 154, 255, 0.3);
  border: 1px solid #00bcf0;
  color: rgba(255, 255, 255, 1);
  font-size: vw(12);
  font-weight: 700;
}
</style>
